<template>
	<view class="custom-tab-bar">
		<template v-for="(item, i) of tabs" :key="i">
			<view class="tab-item" :class="{ active: activeTab === item.type }" @click="switchTab(item)">
				<uni-icons :type="item.icon" size="24"></uni-icons>
				<text>{{ item.title }}</text>
			</view>
		</template>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

let activeTab = ref('home'); // 默认选中首页

const tabs = reactive([
	{
		type: 'home',
		icon: 'home',
		title: '首页',
		path: '/pages/home/index'
	},
	{
		type: 'self',
		icon: 'person',
		title: '我的',
		path: '/pages/self/index'
	}
]);

// 切换 Tab 的函数
function switchTab(item) {
	activeTab.value = item.type;
	uni.reLaunch({
		url: item.path
	});
}

onLoad(() => {
	const routes = getCurrentPages();
	const route = routes[routes.length - 1].route;
	activeTab.value = tabs.find((item) => item.path .includes(route)).type
});
</script>

<style lang="scss" scoped>
.custom-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	border-top: 1px solid #eee;
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #666;
	}

	.tab-item.active {
		color: #007aff;
		font-weight: bold;
	}
}
</style>
